import { Close } from '@mui/icons-material';
import { Box, Dialog, DialogContent, DialogTitle, IconButton, Typography } from '@mui/material';
import create from 'zustand';

import { useStyles } from './UIs/styled-mui-dialog';

type ConnectWalletStore = {
    open: boolean;
    close?: () => void;
};

const useConnectWalletStore = create<ConnectWalletStore>((set) => ({
    open: false,
    close: () => set({ open: false })
}));

export const connectWalletDialog = ({ open }: ConnectWalletStore) => {
    useConnectWalletStore.setState({
        open
    });
};

const ConnectWalletDialog = () => {
    const style = useStyles();
    const { open, close } = useConnectWalletStore();
    return (
        <Dialog open={open} maxWidth="sm" fullWidth>
            <style jsx global>{`
                .background-dialog {
                    background: linear-gradient(
                        278.2deg,
                        rgba(56, 175, 254, 0.95) -29.02%,
                        rgba(74, 17, 145, 0.95) 113.46%
                    );
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .fox-wrapper {
                    width: 136.28px;
                    height: 137.73px;

                    background: linear-gradient(
                        126.04deg,
                        rgba(255, 255, 255, 0.2) 28.94%,
                        rgba(255, 255, 255, 0) 104.16%
                    );
                    border: 0.762254px solid rgba(255, 255, 255, 0.25);
                    box-sizing: border-box;
                    border-radius: 5.34915px;
                }

                .fox {
                    width: 80px;
                    height: 80px;
                    background-image: url(/metamask.png);
                    background-size: contain;
                }
            `}</style>
            <Box className={'background-dialog'}>
                <DialogTitle className={style.textTitle}>Connect your wallet</DialogTitle>
                <IconButton className={style.closeBtn} onClick={close}>
                    <Close style={{ color: '#ffffff' }} />
                </IconButton>
            </Box>
            <DialogContent className={'background-dialog'}>
                <Box
                    className={'fox-wrapper'}
                    display="flex"
                    justifyContent="center"
                    alignItems="center"
                    flexDirection="column"
                >
                    <div className={'fox'} />
                    <Typography className={style.textContent}>Metamask</Typography>
                </Box>
            </DialogContent>
        </Dialog>
    );
};

export default ConnectWalletDialog;
